<template>
    <div class="root">
        <div class="l-content">
            <el-button plain icon="el-icon-menu" size="mini" @click="changeCollapse"></el-button>
            <span>首页</span>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span>
                    <img :src="imgData" class="user">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item @click="gotoLogin">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgData:require('../assets/images/user.png'),
            ifCollapse: true
        }
    },
    methods: {
        changeCollapse(){
            this.ifCollapse = !this.ifCollapse
            this.$store.commit('changeCollapse', this.ifCollapse)
        },
        gotoLogin(){
            alert('1')
            this.$store.commit('clearMenu')
            this.$router.replace(`/login`)
        }
    },
}
</script>

<style lang="less" scoped>
    .root {
        display: flex;
        height: 100%;
        justify-content:space-between;
        align-items: center;
        .l-content {
            display: flex;
            align-items: center;
            .el-button {
                margin-right: 20px;
            }
        }
        .r-content {
            .user {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
    }
</style>